<template>
    <div class="madp-dynamic-info" @click="closePopover">
        <div class="tabs">
            <div :class="{ item: true, 'cursor-pointer': true, active: activeIdx == 1 }" @click="handleTab(1)">互动轨迹</div>
            <div :class="{ item: true, 'cursor-pointer': true, active: activeIdx == 2 }" @click="handleTab(2)">跟进记录</div>
            <div :class="{ item: true, 'cursor-pointer': true, active: activeIdx == 3 }" @click="handleTab(3)">待办事项</div>
        </div>
        <div class="container" v-if="activeIdx == 1 || activeIdx == 2">
            <mescroll-view :showMoreBtn="page.current * page.size < page.total" @getMoreData="getMoreData">
                <el-empty v-if="newsList.length < 1" :image="require('@/assets/img/no-todo.png')" description="暂无数据"></el-empty>
                <div v-else style="padding-top: 8px">
                    <el-timeline>
                        <el-timeline-item timestamp="" :hide-timestamp="true" placement="top" v-for="(item, idx) in newsList" :key="idx">
                            <div class="name">
                                <div class="time-header">
                                    <span v-if="activeIdx == 1" class="event-name">{{ item.eventName }}</span>
                                    <span class="create-time">{{ item.createTime }}</span>
                                </div>
                                <div v-if="activeIdx == 2" class="dots cursor-pointer" @click.stop.prevent="showPopover(idx)">
                                    <span class="dot"></span>
                                    <span class="dot"></span>
                                    <span class="dot"></span>
                                </div>
                                <div v-if="activeIdx == 2" class="popover" v-show="visiblePopover[idx]">
                                    <div class="item cursor-pointer" @click.stop.prevent="editRecords(item)">
                                        <i class="el-icon-edit"></i>
                                        <span>修改</span>
                                    </div>
                                    <div class="item cursor-pointer" @click.stop.prevent="deleteRecords(item)">
                                        <i class="el-icon-delete-solid"></i>
                                        <span>删除</span>
                                    </div>
                                </div>
                            </div>
                            <div class="desc">
                                <span
                                    :ref="'text' + idx"
                                    :class="{ 'desc-text': true, 'text-one-ellipsis': !spreadArr[idx] }"
                                    v-html="`<p>${activeIdx == 1 ? item.content : item.followBody}</p>`"
                                ></span>
                                <i v-show="spreadArr[idx]" class="el-icon-arrow-up cursor-pointer" @click="upText(idx)"></i>
                                <i v-show="!spreadArr[idx]" class="el-icon-arrow-down cursor-pointer" @click="spreadText(idx)"></i>
                            </div>
                        </el-timeline-item>
                    </el-timeline>
                </div>
            </mescroll-view>
        </div>
        <div class="container" style="padding-top: 0" v-if="activeIdx == 3">
            <div class="header">
                <div class="left">
                    <span>待办事项</span>
                    <span>({{ page.total }})</span>
                </div>
                <el-select v-model="page.doState" placeholder="请选择" @change="changeDoState">
                    <el-option label="全部" value=""> </el-option>
                    <el-option label="进行中" value="2"> </el-option>
                    <el-option label="结束" value="1"> </el-option>
                </el-select>
            </div>
            <div class="main">
                <mescroll-view :showMoreBtn="page.current * page.size < page.total" @getMoreData="getMoreData">
                    <el-empty v-if="newsList.length < 1" :image="require('@/assets/img/no-todo.png')" description="暂无数据"></el-empty>
                    <div v-else v-for="(item, idx) in newsList" :key="idx">
                        <div class="name">
                            <span></span>
                            <div class="dots cursor-pointer" @click.stop.prevent="showPopover(idx)">
                                <span class="dot"></span>
                                <span class="dot"></span>
                                <span class="dot"></span>
                            </div>
                            <div class="popover" v-show="visiblePopover[idx]">
                                <div v-if="item.doState == 2" class="item cursor-pointer" @click.stop.prevent="editRecords(item)">
                                    <i class="el-icon-edit"></i>
                                    <span>修改</span>
                                </div>
                                <div class="item cursor-pointer" @click.stop.prevent="deleteRecords(item)">
                                    <i class="el-icon-delete-solid"></i>
                                    <span>删除</span>
                                </div>
                            </div>
                        </div>
                        <div class="list-item">
                            <div class="right">
                                <span class="text-two-ellipsis">{{ item.doBody }}</span>
                                <span>{{ item.startTime }}</span>
                            </div>
                            <div class="left">
                                <span v-if="item.doState == 2" class="cursor-pointer" @click="followUp(item)">待办</span>
                            </div>
                        </div>
                    </div>
                </mescroll-view>
            </div>
        </div>
        <add-info-component :dialogTitle="dialogTitle" :visible.sync="dialogVisible" @confirm="confirmDialog" :dialogType="activeIdx == 3 ? 1 : 2" :info="{ inputVal, dateTime }"></add-info-component>
    </div>
</template>
<script>
    import MescrollView from '@/components/material/mescroll-view.vue';
    import * as customerDetailApi from '@/api/customer-details';
    import AddInfoComponent from '@/components/customer-detail/add-info.vue';
    export default {
        components: { MescrollView, AddInfoComponent },
        data() {
            return {
                visiblePopover: [],
                activeIdx: 1, // 1-客户动态 2-跟进记录 3-待办事项
                spreadArr: [],
                newsList: [],
                page: {
                    doState: '',
                    size: 10,
                    current: 1,
                    total: 0
                },
                inputVal: '',
                dateTime: '',
                dialogVisible: false,
                dialogInfo: {},
                dialogTitle: '',
                pickerOptions: {
                    disabledDate(time) {
                        return time.getTime() < Date.now() - 8.64e7;
                    }
                }
            };
        },
        props: {
            wxUserId: {
                type: String,
                default: ''
            },
            wxExternalUserid: {
                type: String,
                default: ''
            },
            isUpdate: {
                type: Number,
                default: 0
            }
        },
        watch: {
            isUpdate: function () {
                if (this.isUpdate == 1 && this.activeIdx == 3) {
                    this.page.current = 1;
                    this.fetchQueryCommissionList();
                } else if (this.isUpdate == 2 && this.activeIdx == 2) {
                    this.page.current = 1;
                    this.fetchQueryFollowList();
                }
            }
        },
        created() {},
        mounted() {
            this.fetchWorkContactWeChatList();
            this.$emit('update:isUpdate', 0);
        },
        methods: {
            handleTab(idx) {
                this.page.current = 1;
                this.newsList = [];
                if (idx == 1) {
                    this.fetchWorkContactWeChatList();
                } else if (idx == 2) {
                    this.fetchQueryFollowList();
                } else if (idx == 3) {
                    this.fetchQueryCommissionList();
                }
                this.activeIdx = idx;
            },
            getMoreData() {
                this.page.current++;
                if (this.activeIdx == 1) {
                    this.fetchWorkContactWeChatList();
                } else if (this.activeIdx == 2) {
                    this.fetchQueryFollowList();
                } else if (this.activeIdx == 3) {
                    this.fetchQueryCommissionList();
                }
            },
            changeDoState() {
                this.page.current = 1;
                this.fetchQueryCommissionList();
            },
            // 打开弹窗
            showPopover(idx) {
                this.visiblePopover.length = 0;
                this.visiblePopover[idx] = true;
                this.$forceUpdate();
            },
            // 关闭弹窗
            closePopover() {
                this.visiblePopover.length = 0;
                this.$forceUpdate();
            },
            // 展开
            spreadText(idx) {
                this.spreadArr[idx] = true;
                this.$forceUpdate();
            },
            // 收起
            upText(idx) {
                this.spreadArr[idx] = false;
                this.$forceUpdate();
            },
            editRecords(info) {
                this.closePopover();
                this.dialogTitle = this.activeIdx == 2 ? '修改跟进信息' : '修改待办信息';
                this.inputVal = this.activeIdx == 2 ? info.followBody : info.doBody;
                this.dateTime = info.startTime;
                this.dialogInfo = info;
                this.dialogVisible = true;
            },
            // 确认修改信息
            confirmDialog(info) {
                if (this.activeIdx == 2) {
                    customerDetailApi
                        .updateFollowInfo({
                            followBody: info.inputVal,
                            id: this.dialogInfo.id
                        })
                        .then((res) => {
                            this.dialogInfo.followBody = this.inputVal;
                            this.dialogVisible = false;
                        });
                } else if (this.activeIdx == 3) {
                    customerDetailApi
                        .updateToDoInfo({
                            doBody: info.inputVal,
                            startTime: info.dateTime,
                            id: this.dialogInfo.id
                        })
                        .then((res) => {
                            this.dialogInfo.doBody = this.inputVal;
                            this.dialogVisible = false;
                        });
                }
            },
            deleteRecords(info) {
                this.closePopover();
                if (this.activeIdx == 2) {
                    customerDetailApi
                        .deleteFollow({
                            id: info.id
                        })
                        .then((res) => {
                            this.page.current = 1;
                            this.fetchQueryFollowList();
                        });
                } else if ((this.activeIdx = 3)) {
                    customerDetailApi.deleteToDoInfo(info.id).then((res) => {
                        this.page.current = 1;
                        this.fetchQueryCommissionList();
                    });
                }
            },
            // 跟进待办
            followUp(info) {
                customerDetailApi
                    .changeToDoState({
                        id: info.id,
                        state: 1
                    })
                    .then((res) => {
                        this.$toast({ text: '待办完成' });
                        this.page.current = 1;
                        this.fetchQueryCommissionList();
                    });
            },
            // 数据格式转换
            getShowTime(str) {
                let arr = str.split(' ');
                let dateArr = arr[0].split('-');
                let timeArr = arr[1].split(':');
                return `${dateArr[1]}-${dateArr[2]} ${timeArr[0]}:${timeArr[1]}`;
            },
            // 获取客户动态列表
            fetchWorkContactWeChatList() {
                customerDetailApi
                    .workContactWeChatList({
                        wxExternalUserid: this.wxExternalUserid,
                        wxUserId: this.wxUserId,
                        current: this.page.current,
                        size: this.page.size
                    })
                    .then((res) => {
                        if (res.data.code === 0) {
                            this.page.total = res.data.data.total;
                            let list = res.data.data.records;
                            if (this.page.current == 1) {
                                this.newsList = list;
                            } else {
                                this.newsList.push(...list);
                            }
                        }
                    });
            },
            // 获取跟进记录
            fetchQueryFollowList() {
                this.$emit('update:isUpdate', 0);
                customerDetailApi
                    .queryFollowList({
                        wxExternalUserid: this.wxExternalUserid,
                        wxUserId: this.wxUserId,
                        current: this.page.current,
                        size: this.page.size
                    })
                    .then((res) => {
                        if (res.data.code === 0) {
                            this.page.total = res.data.data.total;
                            let list = res.data.data.records;
                            list.map((ele) => {
                                ele.time = this.getShowTime(ele.createTime);
                            });
                            if (this.page.current == 1) {
                                this.newsList = list;
                            } else {
                                this.newsList.push(...list);
                            }
                        }
                    });
            },
            // 获取待办事项
            fetchQueryCommissionList() {
                this.$emit('update:isUpdate', 0);
                customerDetailApi
                    .queryCommissionList({
                        state: this.page.doState,
                        wxExternalUserid: this.wxExternalUserid,
                        wxUserId: this.wxUserId,
                        current: this.page.current,
                        size: this.page.size
                    })
                    .then((res) => {
                        if (res.data.code === 0) {
                            this.page.total = res.data.data.total;
                            if (this.page.current == 1) {
                                this.newsList = res.data.data.records;
                            } else {
                                this.newsList.push(...res.data.data.records);
                            }
                        }
                    });
            }
        }
    };
</script>
<style lang="scss" scoped>
    .madp-dynamic-info {
        padding: 20px 16px;
        background: #ffffff;
        box-shadow: 0px 3px 6px 0px rgba(181, 181, 181, 0.16);
        border-radius: 8px;
        height: calc(100vh - 145px);
        .tabs {
            display: flex;
            justify-content: space-between;
            .item {
                padding: 4px 16px;
                background: #fafafa;
                border-radius: 4px;
                font-size: 14px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: rgba(44, 44, 44, 0.5);
            }
            .active {
                background: rgba(237, 85, 85, 0.1);
                color: #ed5555;
            }
        }
        .container {
            margin-top: 16px;
            height: calc(100% - 39px);
            .name {
                display: flex;
                align-items: center;
                justify-content: space-between;
                margin-bottom: 4px;
                position: relative;
                :nth-child(1) {
                    flex: 1;
                    font-size: 14px;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #2c2c2c;
                }
                .time-header {
                    flex: 1;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    .event-name {
                        font-size: 14px;
                        font-family: PingFangSC-Regular, PingFang SC;
                        font-weight: 400;
                        color: #2c2c2c;
                    }
                    .create-time {
                        font-size: 12px;
                        font-family: PingFangSC-Regular, PingFang SC;
                        font-weight: 400;
                        color: rgba(44, 44, 44, 0.5);
                    }
                }
                .dots {
                    height: 15px;
                    display: flex;
                    align-items: center;
                    .dot {
                        margin-left: 4px;
                        width: 3px;
                        height: 3px;
                        border-radius: 50%;
                        background: #2c2c2c;
                    }
                }
                .popover {
                    position: absolute;
                    height: 45px;
                    background: rgba(44, 44, 44, 0.8);
                    border-radius: 4px;
                    right: 0;
                    top: 20px;
                    z-index: 999;
                    display: flex;
                    .item {
                        padding: 0 10px;
                        text-align: center;
                        line-height: 45px;
                        font-size: 15px;
                        font-family: PingFangSC-Regular, PingFang SC;
                        font-weight: 400;
                        color: #ffffff;
                        i {
                            color: #ffffff;
                            margin-right: 3px;
                        }
                    }
                }
            }
            .desc {
                position: relative;
                background: #fafafa;
                border-radius: 8px;
                padding: 16px 0;
                padding-left: 15px;
                padding-right: 36px;
                display: flex;
                margin-top: 10px;
                .desc-text {
                    width: 100%;
                    word-break: break-all;
                }
                i {
                    position: absolute;
                    right: 16px;
                    top: 16px;
                    font-size: 14px;
                }
            }
            .header {
                display: flex;
                justify-content: space-between;
                align-items: center;
                .left {
                    font-size: 14px;
                    font-family: PingFangSC-Medium, PingFang SC;
                    font-weight: 500;
                    :nth-child(1) {
                        color: #2c2c2c;
                    }
                    :nth-child(2) {
                        margin-left: 3px;
                        color: #2c2c2c;
                        opacity: 0.5;
                        font-size: 15px;
                    }
                }
                /deep/.el-input__inner {
                    background: none;
                    border: none;
                    padding: 0;
                    text-align: right;
                    padding-right: 32px;
                    width: 110px;
                    font-size: 14px;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: rgba(44, 44, 44, 0.8);
                }
                /deep/.el-icon-arrow-up:before {
                    content: '\e78f';
                    color: rgba(44, 44, 44, 0.5);
                }
            }
            .main {
                height: calc(100% - 35px);
                .dots {
                    margin-right: 5px;
                    margin-bottom: 5px;
                }
                .list-item {
                    display: flex;
                    justify-content: space-between;
                    padding: 16px;
                    background: #fafafa;
                    border-radius: 8px;
                    margin-bottom: 16px;
                    .right {
                        flex: 1;
                        display: flex;
                        flex-direction: column;
                        :nth-child(1) {
                            font-size: 15px;
                            font-family: PingFangSC-Regular, PingFang SC;
                            font-weight: 400;
                            color: #2c2c2c;
                        }
                        :nth-child(2) {
                            margin-top: 4px;
                            font-size: 13px;
                            font-family: PingFangSC-Medium, PingFang SC;
                            font-weight: 500;
                            color: rgba(44, 44, 44, 0.5);
                        }
                    }
                    .left {
                        display: flex;
                        align-items: center;
                        span {
                            padding: 5px 14px;
                            background: #ffffff;
                            border-radius: 13px;
                            border: 1px solid rgba(44, 44, 44, 0.1);
                            font-size: 14px;
                            font-family: PingFangSC-Regular, PingFang SC;
                            font-weight: 400;
                            color: #ed5555;
                        }
                    }
                }
            }
            /deep/.el-timeline {
                .el-timeline-item__tail {
                    left: 5px;
                }
                .el-timeline-item__node--normal {
                    left: 0;
                }
            }
        }
    }
</style>
